<template>
  <el-container>
    <el-main class="main-select-body bgfff">
      <div class="table-bg"></div>
      <el-table
        class="marT20"
        :data="tableData"
        :height="tableHeight"
        v-loading="loading"
        @row-dblclick="dialogEdit"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column width="70" align="center" type="index" label="序号"></el-table-column>
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        ></el-table-column>
        <!-- <el-table-column :label="$t('base.table.action')">
                    <template slot-scope="scope">
                        <el-button
                        type="text"
                            @click="dialogView(scope.row)"
                        >查看</el-button>
                        <el-button
                        type="text"
                            @click="dialogEdit(scope.row)"
                        >编辑</el-button>
                        <el-button
                        type="text"
                            icon="el-icon-delete"
                            @click="onDelete(scope.row)"
                        >删除</el-button>
                    </template>
        </el-table-column>-->
      </el-table>
      <el-pagination
        @size-change="changePageSize"
        @current-change="changePageNo"
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      ></el-pagination>
    </el-main>
    <el-dialog :title="title" :visible.sync="dialogValue" @close="dialogValue = false">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
        <el-form-item label="组件名称">
          <el-input v-model="ruleForm.scenarioName"></el-input>
        </el-form-item>
        <el-form-item label="组件描述">
          <el-input type="textarea" v-model="ruleForm.scenarioDesc"></el-input>
        </el-form-item>
        <el-form-item label="军民类型">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="0">军用</el-radio>
            <el-radio :label="1">民用</el-radio>
            <el-radio :label="2">军民合用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="机动类型">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="0">机动</el-radio>
            <el-radio :label="1">非机动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设施区位">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="0">陆地</el-radio>
            <el-radio :label="1">海事</el-radio>
            <el-radio :label="2">空中</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模型贴图"></el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emitClose">取 消</el-button>
        <el-button type="primary" @click="emitSave">保 存</el-button>
      </span>
    </el-dialog>
    <el-dialog title="查看地图组件" :visible.sync="dialogValue2" @close="dialogValue2 = false">
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogValue2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogValue2 = false">保 存</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>
<script>
import curd from "@/mixins/curd";
export default {
  mixins: [curd],
  data() {
    return {
      columns: [
        { prop: "maneuverName", label: "模型名称" },
        { prop: "status", label: "军民类型" },
        { prop: "principalId", label: "机动类型" },
        { prop: "orgId1", label: "状态" },
        { prop: "orgId2", label: "组件描述" },
        { prop: "createTime", label: "创建时间" },
      ],
      ruleForm: {
        id: undefined,
        maneuverName: "",
        principalId: "",
        orgId: "",
        assistantId: [],
        status: 1,
      },
      resetForm: {
        id: undefined,
        maneuverName: "",
        principalId: "",
        orgId: "",
        assistantId: [],
        status: 1,
      },
      rules: {},
      // 机构选项
      orgOptions: [],
      // 负责人
      principalOptions: [],
      // 助理
      assistantOptions: [],
      dialogValue2: false,
    };
  },
  methods: {
    dialogView(item) {},
    dialogEdit(item, dialogValue = true) {
      this.currentDetail = item;
      if (item) {
        this.ruleForm.id = item.id;
        this.ruleForm.maneuverName = item.maneuverName;
        this.ruleForm.principalId = item.principalId;
        this.ruleForm.orgId = item.orgId;
        this.ruleForm.assistantId = item.assistantId
          ? item.assistantId.split(",")
          : [];
        this.ruleForm.status = item.status;
      }
      this.dialogValue = dialogValue;
    },
  },
};
</script>
